import AboutView from "@/components/AboutView.vue";
import HomeView from "@/components/HomeView.vue";
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
const router= new VueRouter({
    routes:[
        {
            path:"/home",
            component:HomeView,
            meta:{isAuth:true},
            //在路由这边，可以通过props属性接受对应的传递的query参数
           /* 可以用这种key:value的对象像是
            props:{
                msg:"hello world",
            } 
            也可以用这种布尔值的方式，布尔值方式会接受parmas方式
            props:true
            */
           //第三种方式，函数方式，这里声明的都是发送
           //在接受的组件边使用props进行接受，用数组形式即可
           props($route){
             return{
                msg:$route.query.msg //读取对应的msg信息
             }
           }
        },
        {
            path:'/about',
            meta:{isAuth:false},
            component:AboutView,
        }
    ]
})
/*
beforeEach是前置守卫，对应三个参数to,from,next 去，来，放行
案例：如果需要鉴定权限，那么从本地存储读取token信息，如果不是chy，阻拦不放行
否则放行，不需要鉴定权限就直接放行了
*/
router.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){
        //需要鉴权
        if(localStorage.getItem("token") === "chy"){
            next()
        }else{
            alert("无权限")
        }
    }else{
        //直接放行
        next()
    }
}) 
/*
后置守卫，切换后了，因为切换了，所以没有next了
 */
router.afterEach((to,from)=>{
    console.log("后置路由调用",to,from)
})
export default router 